<template>
  <div class="">
    <el-card class="box-card" style="width:220px;">
      <div slot="header" class="wrapper flex_center">
        <div style="margin-right:12px">工具栏</div>
        <div>
          <el-button type="primary" size="mini" circle icon="el-icon-plus" @click="handleClickAdd"></el-button>
          <el-button type="primary" size="mini" circle icon="el-icon-edit" @click="showEditor = !showEditor">
          </el-button>
          <el-button type="primary" size="mini" circle icon="el-icon-delete" @click="showDelete = !showDelete">
          </el-button>
        </div>
      </div>
      <div style="height: 60vh;">
        <div v-for="(item, k) in toolsList" :key="k" class="card_item">
          <div class=" ">
            <el-button type="warning" size="mini" circle icon="el-icon-star-on"></el-button>
            <el-popconfirm @confirm="handlePushToolToTable(item)" title="确定增加这个组合么？">
              <el-button size="mini" slot="reference" round>{{ item.name }}</el-button>
            </el-popconfirm>
          </div>
          <div>
            <el-button type="primary" size="mini" circle icon="el-icon-edit" v-if="showEditor"
              @click="handleClickEditor(item, k)"></el-button>
            <el-button type="primary" size="mini" circle icon="el-icon-delete" v-if="showDelete"
              @click="handleClickDelete(item, k)"></el-button>
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog :title="dialogTitle ? '添加工具项' : '更改工具项'" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :rules="rules" :model="form" inline label-width="120px">
        <el-form-item label="动作编码" prop="ID">
          <el-select v-model="form.ID" placeholder="请选择">
            <el-option v-for="item in enAutoActCode" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组合动作名称" prop="name">
          <el-input v-model="form.Name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="动作类型" prop="Type">
          <el-select v-model="form.Type" placeholder="请选择">
            <el-option v-for="item in enCombinedControlType" :key="item.key" :label="item.name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主动作码" prop="MainActCode">
          <el-select v-model="form.MainActCode" placeholder="请选择">
            <el-option v-for="item in enActionCode" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="序列参数组" prop="ParaIDs">
          <el-select filterable allow-create default-first-option v-model="form.ParaIDs" multiple placeholder="请选择">
            <el-option v-for="item in parasIDsCode" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.groupName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支持类型" prop="shieldTypeOpt">
          <el-select v-model="form.shieldTypeOpt" multiple="" placeholder="请选择">
            <el-option v-for="item in enShieldType" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import InDB from "../utils/initDB.js"
  import enCombinedControlType from '../data/enCombinedControlType';
  import enActionCode from '../data/enActionCode';
  import enParaID from '../data/enParaID';
  import enShieldType from '../data/enShieldType';
  import parasIDsCode from "../data/paraDataCode.js"
  export default {
    props: {
      row: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        parasIDsCode: parasIDsCode,
        enAutoActCode: [],
        enActionCode: enActionCode,
        enCombinedControlType: enCombinedControlType,
        enParaID: enParaID,
        enShieldType: enShieldType,
        form: {},
        rules: {
          ID: [{
            required: true,
            message: '请选择动作编码',
            trigger: 'change'
          }, ],
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }, ],
          Type: [{
            required: true,
            message: '请选择动作类型',
            trigger: 'change'
          }, ],
          MainActCode: [{
            required: true,
            message: '请选择主动作码',
            trigger: 'change'
          }, ],
          ParaIDs: [{
            required: true,
            message: '请选择序列参数组',
            trigger: 'change'
          }, ],
          shieldTypeOpt: [{
            required: true,
            message: '请选择支持类型',
            trigger: 'change'
          }, ],
        },
        showDelete: false,
        showEditor: false,
        dialogVisible: false,
        dialogTitle: false,
        toolsChangeKey: null,
        toolsList: [],
      }
    },
    methods: {
      onSubmit() {
        InDB.defineTools.put({
          ...this.form
        }).then(() => {
          InDB.defineTools.all().then(res => {
            this.toolsList = res
            this.dialogVisible = false;
          })
        })

      },
      handleClickAdd() {
        this.dialogTitle = true;
        this.form = {};
        this.dialogVisible = true;
      },
      handleClickDelete(r, k) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            InDB.defineTools.delete(r.tool_id).then(() => {
              this.toolsList.splice(k, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      handlePushToolToTable(r) {
        InDB.CfgCombineControlDefine.put({
          ...r
        }).then(res => {
          InDB.CfgCombineControlDefine.all().then(res => {
            this.$emit('handlePushToolToTable', res)
          })
        })
      },
      updateTools(r) {
        let obj = JSON.parse(JSON.stringify(r))
        delete obj.id
        InDB.defineTools.put({
          ...obj
        }).then(async () => {
          this.toolsList = await InDB.defineTools.all()
        })
      }
    },
    mounted() {
      InDB.defineTools.all().then(res => {
        this.toolsList = res
        InDB.AutoActCode.all().then(res1 => {
          this.enAutoActCode = res1
        })
      })
    }
  }
</script>

<style scoped="">
  .card_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid #f6f6f6;
  }

  .card_item+.card_item {
    margin-top: 8px;
  }

  .wrapper {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    width: 100%;
  }
</style>
